<template id="range-picker">
	<div class="d-flex">
		<v-menu class="jh-v-input" transition="scale-transition" offset-y>
			<template v-slot:activator="{on, attrs}">
				<v-text-field class="jh-v-input" v-bind="attrs" v-on="on" v-model="dateItem.startDate" dense single-line filled readonly label="开始日期" :background-color="backgroundcolor"></v-text-field>
			</template>
			<v-date-picker v-model="dateItem.startDate"></v-date-picker>
		</v-menu>

		<div style="margin: auto 0">~</div>
		<v-menu class="jh-v-input" transition="scale-transition" offset-y left bottom>
			<template v-slot:activator="{on, attrs}">
				<v-text-field class="jh-v-input" v-bind="attrs" v-on="on" v-model="dateItem.endDate" dense single-line filled readonly label="结束日期" :background-color="backgroundcolor"></v-text-field>
			</template>
			<v-date-picker v-model="dateItem.endDate"></v-date-picker>
		</v-menu>
		<v-btn color="success" @click="emitData" small v-if="hasbutton">查询</v-btn>
	</div>
</template>
<script type="module">
	Vue.component("range-picker", {
		template: "#range-picker",
		props: {
            backgroundcolor:{
                type:String,
                default:"#1F272E"
            },
            hasbutton:{
                type:Boolean,
                default:true
            }
        },
		data: () => ({
			dateItem: {
				startDate: "",
				endDate: "",
			},
		}),
		computed: {},
		watch: {},
		async created() {},
		async mounted() {
			// console.log("1111");
            // debugger
		},
		methods: {
			async doUiAction(uiActionId, uiActionData) {
				switch (uiActionId) {
					default:
						console.error("[doUiAction] uiActionId not find", { uiActionId });
						break;
				}
			},
			initDate({ startDate, endDate }) {
				this.dateItem.startDate = startDate;
				this.dateItem.endDate = endDate;
				// debugger
				this.emitData();
			},
			emitData() {
				this.$emit("onsearch", this.dateItem);
			},
		},
	});
</script>
<style scoped=""></style>
